<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    //语法: CanvasRenderingContext2D.drawImage( img, dx, dy )
    // 随便从百度中搜索 '美女头像', 记录一个链接地址
    var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';
    // 创建 img 对象
    var img = new Image(); // 就是 img 标签
    // 设置 src 属性为 图片
    img.src = url;

    // 绘图
    img.onload = function () {
        ctx.drawImage( img, 100, 100 );
    };
</script>
</body>
</html>